<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部混入</title>
</head>
<body>
    <h2>局部混入</h2>
    <div id="app1">
        <p @click="sayHello">{{fullName}}，年龄：{{age}}</p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    let obj = {
        // Vue对象中data属性：
        // vue不太推荐，data {} ，这种直接把data定义为一个对象的方式，特别如果涉及到对象被复用的情况，会产生大麻烦。
        // vue推荐的方式是，把data定义为一个方法，然后返回一个新对象
        data() {
            return {
                firstName: "Hydra",
                lastName: "Feng",
                age: 35
            }
        },
        methods: {
            sayHello() {
                console.log(this.fullName + "说：“你好！”")
            }
        },
        computed: {
            fullName() {
                return this.firstName + " " + this.lastName;
            }
        }
    }

    new Vue({
        // 局部混入：可以混入多个对象（数组对象）
        mixins: [obj],
        el: "#app1",
        data() {
            return {
                lastName: "Zhang",
                age: 18
            }
        }
    });

</script>
</html>